<template>
  <ThemeProvider :color="{ middle: { 'bg-base': '#fff' }, primary: { DEFAULT: '#1896ff' } }">
    <div class="login-box rounded-sm">
      <v-snackbar v-model="snackbarShow" :timeout="2000" :color="snackbarType">
        <strong>{{ snackbarMsg }}</strong>
      </v-snackbar>
      <div class="loader">
        <div class="words">
          <span class="word">信 心</span>
          <span class="word">合 作</span>
          <span class="word">普 世</span>
          <span class="word">敬 仰</span>
          <span class="word">信 心</span>
        </div>
      </div>
      <a-form
        style="margin-top: 30px"
        :model="form"
        :wrapperCol="{ span: 24 }"
        @finish="login"
        class="login-form w-[400px] p-lg xl:w-[440px] xl:p-xl h-fit text-text"
      >
        <a-form-item :required="true" name="loginName">
          <a-input
            v-model:value="form.loginName"
            autocomplete="new-loginName"
            placeholder="请输入用户名或邮箱: admin"
            class="login-input h-[50px]"
          />
        </a-form-item>
        <a-form-item :required="true" name="loginPassword">
          <a-input
            v-model:value="form.loginPassword"
            autocomplete="new-loginPassword"
            placeholder="请输入登录密码: 888888"
            class="login-input h-[50px]"
            type="loginPassword"
          />
        </a-form-item>
        <v-btn
          rounded="xl"
          size="large"
          htmlType="submit"
          class="h-[60px] w-full"
          type="primary"
          :loading="loading"
          color="primary"
          elevation="6"
          append-icon="mdi-login-variant"
        >
          <span style="font-size: 14px">登 录</span>
        </v-btn>
        <a-divider></a-divider>
        <div class="terms">
          登录即代表您同意我们的
          <span class="font-bold">用户条款 </span>、<span class="font-bold"> 数据使用协议 </span>、以及
          <span class="font-bold">Cookie使用协议</span>。
        </div>
      </a-form>
    </div>
  </ThemeProvider>
</template>
<script lang="ts" setup>
  import { useTheme } from 'vuetify';

  import { reactive, ref } from 'vue';
  import { useAccountStore } from '@/store';
  import { ThemeProvider } from 'stepin';

  export interface LoginFormProps {
    loginName: string;
    loginPassword: string;
  }
  const loading = ref(false);
  const snackbarType = ref('red-darken-2');
  const snackbarShow = ref(false);
  const snackbarMsg = ref('');
  const theme = useTheme();
  console.log('theme', theme);
  const form = reactive({
    loginName: 'zxj',
    loginPassword: '123456',
  });

  const emit = defineEmits<{
    (e: 'success', fields: LoginFormProps): void;
    (e: 'failure', reason: string, fields: LoginFormProps): void;
  }>();

  const accountStore = useAccountStore();
  function login(params: LoginFormProps) {
    loading.value = true;
    accountStore
      .login(params.loginName, params.loginPassword)
      .then((res) => {
        snackbarShow.value = true;
        snackbarType.value = 'success';
        snackbarMsg.value = res.message || '登录成功~';
        emit('success', params);
      })
      .catch((e) => {
        console.log('qwert', e, snackbarShow);
        snackbarShow.value = true;
        snackbarType.value = 'error';
        snackbarMsg.value = e.message || '网络异常';
        emit('failure', e.message, params);
      })
      .finally(() => (loading.value = false));
  }
</script>
<style scoped lang="less">
  .login-input {
    background: #ecf0f3;
    padding: 10px;
    padding-left: 20px;
    font-size: 14px;
    border-radius: 50px;
    box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
    border: none;
  }
  .ant-input:focus,
  .ant-input-focused {
    background: #ecf0f3;
    padding: 10px;
    padding-left: 20px;
    font-size: 14px;
    border-radius: 50px;
    box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
    border: none;
  }
  input:-webkit-autofill,
  textarea:-webkit-autofill,
  select:-webkit-autofill {
    -webkit-box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white !important;
    background-color: transparent;
    background-image: none;
    transition: background-color 50000s ease-in-out 0s;
    //背景色透明  生效时长  过渡效果  启用时延迟的时间
  }
  input {
    background-color: transparent;
  }
</style>
<style lang="less" scoped>
  .words {
    overflow: hidden;
  }
  .loader {
    color: rgb(124, 124, 124);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 25px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 40px;
    padding: 10px 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-radius: 8px;
    width: max-content;
    margin: 0 auto;
  }
  .word {
    display: block;
    height: 100%;
    /* padding-left: 6px; */
    color: var(--colorRed);
    animation: spin_4991 4s infinite;
  }
  @keyframes spin_4991 {
    10% {
      -webkit-transform: translateY(-105%);
      transform: translateY(-105%);
    }

    25% {
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
    }

    35% {
      -webkit-transform: translateY(-205%);
      transform: translateY(-205%);
    }

    50% {
      -webkit-transform: translateY(-200%);
      transform: translateY(-200%);
    }

    60% {
      -webkit-transform: translateY(-305%);
      transform: translateY(-305%);
    }

    75% {
      -webkit-transform: translateY(-300%);
      transform: translateY(-300%);
    }

    85% {
      -webkit-transform: translateY(-405%);
      transform: translateY(-405%);
    }

    100% {
      -webkit-transform: translateY(-400%);
      transform: translateY(-400%);
    }
  }
</style>
